<template>
  <el-card style="width: 100%; height: 70px">
    <div>
      <el-form :data="checkForm" :inline="true">
        <el-form-item style="font-weight: bold">
          <el-input v-model="checkForm.username" style="height: 35px" placeholder="用户"></el-input>
        </el-form-item>
        <button type="button" class="btn btn-outline-primary" style="
              width: 80px;
              height: 35px;
              margin-top: -18px;
              margin-left: -20px;
            " @click="checkCollect">
          查询
        </button>
        <button type="button" class="btn btn-outline-warning" style="
              width: 80px;
              height: 35px;
              margin-top: -18px;
              margin-left: 20px; 
            " @click="reset">
          重置
        </button>
      </el-form>
    </div>
  </el-card>
  <el-card style="margin-top: 2px">
    <button style="width: 100px" @click="deleteAllAddress" class="btn btn-outline-danger">
      批量删除
    </button>
    <button style="margin-left: 10px; width: 80px" @click="addDialogVisibleMethod" class="btn btn-outline-info">
      添加
    </button>
  </el-card>
  <el-card style="margin-top: 2px">
    <div>
      <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        " border style="width: 100%" header-row-class-name="table_header_class"
        @selection-change="handelSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="序号" width="60px" align="center">
          <template #default="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="img" label="商品图片" width="180">
          <template #default="scope">
            <img style="width:60px;height:48px" :src="scope.row.img" />
          </template>
        </el-table-column>
        <el-table-column prop="username" label="用户" width="200" align="center" />
        <el-table-column prop="goodName" label="商品名称" width="360" align="center" />
        <el-table-column prop="sellerName" label="店铺名称" width="220" align="center" />
        <el-table-column prop="price" label="商品价格" width="270" align="center" />
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-popconfirm title="您确认要移除嘛?" @confirm="deleteCollect(scope.row.id)" confirm-button-text="确认"
              cancel-button-text="取消" icon-color="red" style="height: 400px">
              <template #reference>
                <el-button type="danger" plain>移除收藏</el-button>
              </template>
            </el-popconfirm>
            <el-button @click="openUpdate(scope.row.id)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
  <!--添加-->
  <el-dialog v-model="addDialogVisible" title="添加" style="font-weight: bold" width="35%">
    <el-form style="margin-left: 120px" :model="addForm" :inline="true" label-width="120px">
      <el-form-item v-if="addRuleFlag" style="width: 400px; height: 30px">
        <div style="
              margin-left: 50px;
              color: rgb(220, 53, 69);
              width: 288px;
              height: 33px;
              border: 1px solid rgb(220, 53, 69);
              background-color: rgb(254, 242, 242);
            ">
          <div style="float: left">
            <el-icon style="margin: 6px" :size="20">
              <WarningFilled />
            </el-icon>
          </div>
          <div style="float: left; font-size: 14px; color: grey">
            <p>{{ addRuleMsg }}</p>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="用户" style="font-weight: bold" prop="userId">
        <el-select v-model="addForm.userId" placeholder="Select" style="width: 240px">
          <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品" style="font-weight: bold" prop="goodId">
        <el-select v-model="addForm.goodId" placeholder="Select" style="width: 240px">
          <el-option v-for="item in goodData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addCollect"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--修改-->
  <el-dialog v-model="updateDialogVisible" title="修改" style="font-weight: bold" width="25%">
    <el-form :model="updateForm" :inline="true" label-width="120px">
      <el-form-item label="用户" style="font-weight: bold" prop="userId">
        <el-select v-model="updateForm.userId" placeholder="Select" style="width: 240px">
          <el-option v-for="item in userData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="商品" style="font-weight: bold" prop="goodId">
        <el-select v-model="updateForm.goodId" placeholder="Select" style="width: 240px">
          <el-option v-for="item in goodData" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updateDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateCollect"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>

  <!--分页-->
  <div>
    <el-pagination style="margin-left: 730px" small background @current-change="currentChange"
      :current-page="currentPage" :page-size="pageSize" layout="prev, pager, next" :total="tableData.length"
      class="mt-4" />
  </div>
</template>

<script>
import {
  getAll,
  addOne,
  deleteOne,
  deleteAll,
  selectOne,
  updateOne,
  conditionQuery,
} from "../../api/index";

export default {
  data() {
    return {
      checkForm: {
        address: "",
      },
      tableData: [],
      userData: [],
      goodData:[],
      currentPage: 1,
      pageSize: 8,
      addDialogVisible: false,
      updateDialogVisible: false,
      addForm: {
        userId: "",
        goodId:""
      },
      updateForm: {},
      addRuleFlag: false,
      addRuleMsg: "",
      updateRuleFlag: false,
      updateRuleMsg: "",
      ids: [],
      flag: true
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    loadData() {
      getAll("collect").then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
      getAll("user").then((res) => {
        if (res.code === 200) {
          this.userData = res.data;
        } else {
          this.$message.error(res.message);
        }
      });
      getAll("goods").then(res=>{
        if (res.code===200) {
          this.goodData = res.data;
        }else{
          this.$message.error(res.message);
        }
      })
    },
    currentChange(val) {
      this.currentPage = val;
    },
    addDialogVisibleMethod() {
      (this.addForm.userId = ""),
        (this.addForm.goodId = ""),
        (this.addRuleFlag = false),
        (this.addRuleMsg = ""),
        (this.addDialogVisible = true);
    },
    addCollect() {
      if (this.addForm.userId === "") {
        this.addRuleFlag = true,
          this.addRuleMsg = "用户不能为空"
      } else if (this.addForm.username === "") {
        this.addRuleFlag = true,
          this.addRuleMsg = "商品不能为空"
      } else {
        addOne("collect", this.addForm).then(res => {
          if (res.code === 200) {
            this.addDialogVisible = false,
              this.$message.success(res.message),
              this.loadData()
          } else {
            this.addDialogVisible = false
            this.$message.error(res.message)
          }
        })
      }
    },
    deleteCollect(id) {
      deleteOne("collect", id).then((res) => {
        if (res.code === 200) {
          this.loadData();
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    deleteAllCollect() {
      if (this.ids.length === 0) {
        this.$message.info("未选中");
      } else {
        this.$confirm("你确认要删除嘛？", "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "error",
        })
          .then(() => {
            deleteAll("collect", this.ids).then((res) => {
              if (res.code === 200) {
                this.loadData();
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message);
              }
            });
          })
          .catch(() => {

            this.$message.info("取消删除");
          });
      }
    },
    handelSelectionChange(val) {
      this.ids = []
      for (let i = 0; i < val.length; i++) this.ids[i] = val[i].id;
    },
    openUpdate(id) {
      this.updateRuleFlag = false,
        this.updateRuleMsg = "",
        selectOne("collect", id).then((res) => {
          if (res.code === 200) {
            this.updateForm = res.data;
            this.updateDialogVisible = true;
          } else {
            this.$message.error(res.message);
          }
        });
    },
    updateCollect() {
      if (this.updateForm.userId === "") {
        this.updateRuleFlag = true,
          this.updateRuleMsg = "用户不能为空"
      } else if (this.updateForm.goodId === "") {
        this.updateRuleFlag = true,
          this.updateRuleMsg = "商品不能为空"
      }else{
        updateOne("collect", this.updateForm).then((res) => {
          if (res.code === 200) {
            this.$message.success(res.message);
            (this.updateDialogVisible = false), this.loadData();
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    reset() {
      this.checkForm.username=""
    },
    checkCollect() {
      if (this.checkForm.username==="") {
        this.loadData();
      } else {
        conditionQuery("collect", this.checkForm).then((res) => {
          if (res.code === 200) {
            this.tableData = res.data;
          } else {
            this.$message.error(res.message);
          }
        });
      }
    },
    findNameById(id) {
      const index = this.userData.findIndex(user => user.id === id);
      if (index !== -1) {
        return this.userData[index].name;
      } else {
        return 'Name not found';
      }
    }
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/deep/ .table_header_class th {
  background-color: #f0f2ff;
  color: #8c99ff;
  text-align: center;
  height: 50px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>